import Taro, { Component } from '@tarojs/taro';
import { View, Button, Image } from '@tarojs/components';
import { connect } from '@tarojs/redux'

import Enum from '../../constants/Enum';
import './style.less';

import qr from './images/qr.jpg'

@connect(
  state => ({
    practice: state.system.practice.put
  })
)
class Summary extends Component {
  constructor(props) {
    super(props)
    this.state = {
      painting: {},
      shareImage: ''
    }
    this.userInfo = {}
    try {
      this.userInfo = Taro.getStorageSync(Enum.userInfo)
    } catch (error) {
      Taro.showModal({
        title:'警告',
        content: '发生错误, 需返回首页',
        showCancel: false
      })
    }
  }
  config = {
    navigationBarTitleText: '完成练习',
    navigationBarBackgroundColor: '#6C8AF8',
    navigationBarTextStyle: 'white',
    usingComponents: {
      "easy-canva": "../../wx_components/easy-canva/easy-canva"
    }
  }
  componentDidMount () {
    this.eventDraw()
  }
  eventGetImage = (event) => {
    Taro.hideToast();
    const { tempFilePath, errMsg } = event.detail;
    if (errMsg === 'canvasdrawer:ok') {
      this.setState({
        shareImage: tempFilePath
      })
    }
  }
  onShareAppMessage() {
    return {
      title: '大脑训练-让孩子更聪明',
      path: '/pages/index/index?shear=true',
      // imageUrl: ''
    }
  }
  eventDraw = () => {

    const { practice } = this.props
    const { category, correct, error, duration, details } = practice.payload

    let label = Enum.categoryLabelMap[category]
    let correctRate = ((correct / details.length) * 100).toFixed(2)
    let errorRate = ((error / details.length) * 100).toFixed(2)
    let contentLeft = 55

    Taro.showToast({
      title: '正在生成结果',
      icon: 'loading'
    })

    let userInfo = Taro.getStorageSync(Enum.userInfo);
    userInfo = JSON.parse(userInfo);

    const { avatarUrl } = JSON.parse(this.userInfo)
    this.setState({
      painting: {
        width: 375,
        height: 555,
        clear: true,
        views: [
          {
            type: 'rect',
            background: '#fff',
            top: 0,
            left: 0,
            width: 375,
            height: 555
          },
          {
            type: 'roundrect',
            background: "#fff",
            top: 57.5,
            left: 88,
            width: 280,
            height: 25,
            radius: 10,
            shadowBlur: 10,
            shadowColor: "rgba(255,255,255,.5)"
          },
          {
            type: 'image',
            url: avatarUrl,
            top: 27.5,
            left: 29,
            width: 55,
            height: 55,
            borderRadius: true
          },
          {
            type: 'text',
            content: `【${userInfo.nickName}】已完成练习`,
            fontSize: 16,
            color: '#000',
            textAlign: 'left',
            top: 33,
            left: 96,
            bolder: true
          },
          {
            type: 'text',
            content: `真厉害,在${duration}秒内做完了 ${details.length} 到数学题！`,
            fontSize: 15,
            color: '#6C8AF8',
            textAlign: 'left',
            top: 59.5,
            left: 96
          },
          {
            type: 'text',
            content: `${label}练习 ${details.length} 次`,
            fontSize: 28,
            color: '#000',
            textAlign: 'left',
            top: 140,
            left: contentLeft
          },
          {
            type: 'text',
            content: `正确: ${correctRate}%`,
            fontSize: 24,
            color: 'green',
            textAlign: 'left',
            top: 210,
            left: contentLeft
          },
          {
            type: 'text',
            content: `错误: ${errorRate}%`,
            fontSize: 24,
            color: 'red',
            textAlign: 'left',
            top: 250,
            left: contentLeft
          },
          {
            type: 'text',
            content: `用时: ${duration}秒`,
            fontSize: 24,
            color: '#000',
            textAlign: 'left',
            top: 290,
            left: contentLeft
          },
          {
            type: 'image',
            url: qr,
            top: 470,
            left: 85,
            width: 68,
            height: 68,
            borderRadius: true
          },
          {
            type: 'text',
            content: '百格计算: 训练孩子大脑对数字的敏感度!',
            fontSize: 16,
            lineHeight: 21,
            color: '#000',
            textAlign: 'left',
            top: 400,
            left: 44,
            width: 287,
            MaxLineNumber: 2,
            breakWord: true,
            bolder: true
          },
          {
            type: 'text',
            content: '长按识别图中二维码你也来试试呗~',
            fontSize: 14,
            color: '#383549',
            textAlign: 'left',
            top: 483,
            left: 165.5,
            lineHeight: 20,
            MaxLineNumber: 2,
            breakWord: true,
            width: 125
          },
        ]
      }
    })

  }
  eventSave = () => {
    Taro.saveImageToPhotosAlbum({
      filePath: this.state.shareImage,
      success(res) {
        Taro.showToast({
          title: '图片已保存到相册',
          icon: 'success',
          duration: 2000
        })
      }
    })
  }
  render() {
    const { painting, shareImage } = this.state
    return (
      <View className='summary' >
        {
          this.userInfo ? (
            <View>
              <Image src={shareImage} className='share-image'></Image>
              <easy-canva painting={painting} className='easy-canva' onGetImage={this.eventGetImage} />
              <View className='share' >
                <Button className='btn' openType='share' >分享群/好友</Button>
                <Button className='btn' onClick={this.eventSave} >分享朋友圈</Button>
              </View>
            </View>
          ) : (
            <View>
              发生异常
            </View>
          )
        }
      </View>
    )
  }
}

export default Summary;
